const puppeteer = require('puppeteer');
const chalk = require('chalk')
const log = console.log
const config = require('./config')
const dateUtil = require('../utils/dateFormat')
const fileUtil = require('./fileUtils')

    ; (async () => {

        console.log(`${dateUtil.getYMDhms4now()} 开始访问`);
        // 启动一个浏览器
        const browser = await puppeteer.launch({
            // defaultViewport : { 'width' : width,'height' : height },
            args: ['--no-sandbox'],
            dumpio: false,
            headless: false //打开chrome可视化窗口 true是不打开 false是打开
        });
        console.log(`${dateUtil.getYMDhms4now()} 打开一个新tab页面`)
        // 开启一个新页面(await browser.pages()官网写法默认两个tab，操作第二个tab页)
        const page = (await browser.pages())[0];



        // const page = await browser.newPage();

        // page.setDefaultNavigationTimeout( 90000 );

        await page.setViewport({
            width: 1773,
            height: 903
        });

        // await page.setUserAgent( 'UA-TEST' );


        console.log(`${dateUtil.getYMDhms4now()}访问目标登录页面:${config.loginUrl}`)
        await page.goto(config.loginUrl, {
            waitUntil: 'networkidle2',  // 网络空闲说明已加载完毕
        });

        // 等待页面滚动完毕，这里设置的是固定的时间间隔，之前使用过page.waitForNavigation()，但是因为等待的时间过久导致报错（Puppeteer默认的请求超时是30s,可以修改）,因为这个页面总有一些不需要的资源要加载，而我的网络最近日了狗，会导致超时，因此我设定等待2.5s就够了
        // await page.waitFor(10000) // 等待登录弹窗显示

        console.log(`${dateUtil.getYMDhms4now()} 输入账号密码 进行登录操作`)
        var loginIput = await page.waitFor('#email');//等待用户名输入框出现
        // console.log(loginIput)
        await loginIput.type('2291006094@qq.com');//输入账户
        var loginPwd = await page.waitFor('#password');//等待密码输入框出现
        // console.log(loginPwd)
        await loginPwd.type('ba19930118');//输入账户
        await page.waitFor(2000);

        var loginBtn = await page.waitFor('#login-button');
        // console.log(loginBtn)

        loginBtn.click()
        
        console.log(`${dateUtil.getYMDhms4now()} 登录成功，跳转主页`)
        await page.waitFor(15000);

        // 跳转资源页面
        await page.goto(config.resourceUrl, {
            waitUntil: 'networkidle2',  // 网络空闲说明已加载完毕
        });
        await page.waitFor(2000);


        // 使用一个 for await 循环，不能一个时间打开多个网络请求，这样容易因为内存过大而挂掉
        for (let i = 2; i <= 5; i++) {
            // 找到左侧图片展示列表的右侧箭头
            let moreBtn = await page.$('a[ng-click="loadMoreFile()"]')
            try {
                await moreBtn.click()
                console.log(`${dateUtil.getYMDhms4now()}选择器右击了。。。$('a[ng-click="loadMoreFile()"]'`,)
                // 点击获取更多进度
                console.log('点击完毕，加载数据', i)
                // 等待页面加载完毕，这里设置的是固定的时间间隔
                await page.waitFor(2000)
                
            } catch (error) {
                console.log(chalk.yellow(error))
            }

        }
        console.log(`加载a[ng-click="loadMoreFile()"]更多部分数据完毕....`)

        await page.evaluate(function() {
            /* 这里做的是渐进滚动，如果一次性滚动则不会触发获取新数据的监听 */
            /*执行js代码（滚动页面）*/
            for (var y = 0; y <= 22000; y += 50) {
                setTimeout(() => {
                    window.scrollTo(0, y)
                }, 33 + y)
                setTimeout(() => {
                    window.scrollTo(0, y / 2)
                }, 333 + y)
            }

            window.scrollTo(0, $(document).scrollTop() / 2)
        })
        console.log('页面滚动完毕')

        console.log('开始获取页面元素O(∩_∩)O')
        // 爬取目标数据
        const results = await page.evaluate(() => {
                // 拿到页面上的jQuery
                var $ = window.$
                // 用来存储某个模块的具体信息
                var results = [];

                // 获取图片链接
                let domain = $('select[name="domain"] > option:selected').text()
                console.log(`获取七牛存储空间的域名：${domain}`)
                // http://pz1j1l26s.bkt.clouddn.com/myLove/img/dabaitu.jpg
                var trs = $('tr.file-tr')
                console.log('trs第一行的元素', trs.eq(0))
                if (trs.length) {
                    trs.each((index, item) => {
                        if(index === 0){
                            console.log($(item))
                            console.log(item)
                            console.log("$(item).find('.file-td').find('span.edit-word').text()->", $(item).find('span.edit-word').text())
                        }
                        let imgUrl = $(item).find('.file-td').find('span.edit-word').text()
                        results.push({
                            id: index,
                            imgUrl: ['http://', domain || 'pz1j1l26s.bkt.clouddn.com', '/', imgUrl].join('')
                        })
                    });
                }
                console.log('获取页面元素完毕')
                return results
        });

        console.log('imgUrlResults', results);
        console.log('imgUrl数量', results.length);


        console.log("开始保存图片到本地 请稍等.....");

        // await saveUtil.beforeSave().then((res) => {
        //     console.log('index中的创建父目录', res)
        //     saveUtil.saveFile(results)
        // }).catch(err => {
        //     console.log(chalk.yellow(err))
        // })

        // 关闭浏览器
        //   browser.close();
        fileUtil.writeJson({
            filePath: './mock/data.json',
            results
        })
    })();


